<template>
  <a-divider class="divider-cls" />
  <div class="notice-empty" v-if="notifyData.length === 0">
    <empty description="暂无实时告警信息" />
  </div>
  <a-divider class="divider-cls" />
  <p class="more-cls" @click="handleClickMore">
    <span>查看更多</span>
  </p>
</template>
<script setup lang="ts" name="NotifyInfo">
import { computed } from 'vue'

const emit = defineEmits(['handleClickMore'])
const props = defineProps({
  notifyData: {
    type: Array,
    default: () => []
  }
})

const notifyData = computed(() => props.notifyData)

const handleClickMore = () => {
  emit('handleClickMore')!
}
</script>
<style lang="less" scoped>
.divider-cls {
  margin: 0;
}
.more-cls {
  height: 36px;
  line-height: 46px;
  text-align: center;
  color: #262626;
  cursor: pointer;
  & span:hover {
    color: var(--menu-selected-color);
  }
}
.notice-empty {
  width: 300px;
  height: 150px;
}
</style>
